/**
 * 
 */
<template>
  <div id="qmviewer_container" style="height: 100%">
    <qmviewer
      v-bind:modelName="modelName"
      v-bind:isCompont="isCompont"
      v-bind:isLocal="isLocal"
      @callFather_loaded="callFather_loaded"
    ></qmviewer>

    <transition class="move_root">
      <!--    绑定style中top和left-->
      <div class="moveBox" :style="position" v-show="show">
        <div
          class="moveHead"
          @mousedown="mousedown"
          @mousemove="mousemove"
          @mouseup="mouseup"
          @mouseleave="mousemove"
        >
          {{ title }}
        </div>
        <!--      关闭按钮-->
        <div class="close" @click="toggleShow()">X</div>
        <div class="content">
          <!--插槽-->
          <slot>
            <p>效果示例</p>
            <button
              type="button"
              class="el-button el-button--primary el-button--small"
              @click="onSetWhite()"
            >
              白模效果
            </button>
            <button
              type="button"
              class="el-button el-button--primary el-button--small"
              v-show="hasModelOpened"
              @click="onSetTransparent()"
            >
              透明效果
            </button>
            <button
              type="button"
              class="el-button el-button--primary el-button--small"
              v-show="hasModelOpened"
              @click="onSetBloom()"
            >
              发光效果
            </button>
            <button
              type="button"
              class="el-button el-button--primary el-button--small"
              v-show="hasModelOpened"
              @click="onSetMark()"
            >
              加个标签
            </button>
          </slot>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import qmviewer from "../../components/qmviewer";
import "../../css/lable.css";
export default {
  name: "Demo5",
  data() {
    return {
      //打开空模型，稍后再加载不同样式的。
     modelName: "/static/localmodel/" + "bimfaceDemo",
      isLocal: true,
      isCompont: true,
      hasModelOpened: false,
      //移动窗体的属性
      title: "运维常用接口",
      show: true, //是否显示
      x: 300, //left:x
      y: 60, //top:y
      leftOffset: 0, //鼠标距离移动窗口左侧偏移量
      topOffset: 0, //鼠标距离移动窗口顶部偏移量
      isMove: false, //是否移动标识
      //标签
      domMap: new Map(),
      qmodel_container: null,
    };
  },
  // 注册组件
  components: {
    qmviewer,
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  beforeCreate() {},
  created() {
    //console.log(this._data);
  },
  computed: {
    //top与left加上px
    position() {
      return `top:${this.y}px;left:${this.x}px;`;
    },
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 模型加载完成事件
    callFather_loaded(parm) {
      var _this = this;
      _this.qmodel_container = document.getElementById("qmviewer_container");
      //通常情况下，qmodel是个全局变量，qmodel可直接使用。
    },

    onSetWhite() {
      var params = qmodel.get_option();
      params.autotransp = true;
      params.transpvalue = 0.5;
      params.force=true;//强制按用户参数执行
      params.type = 0;
      params.noServer=1;
      var _this = this;
      //该参数可以上模型在加载时，全部换成统一的材质，实现大量的合批提效。在运维模型以透明模型为主的场景中，可以先这样设置，避免加载过多的贴图纹理。
      qmodel.open_other_model( "/static/localmodel/" + "bimfaceDemo", params).then((e) => {
        _this.onModelLoaded();
      });
    },
    onModelLoaded() {
      qmodel.set_background(0x110001);
      this.hasModelOpened = true;
      qmodel.set_mark_click_callback(function (cmpId, markId, pngIndex) {
        if (markId == "e9435c0f-743a-4308-b42f-c037b84356fd") {
          console.log("已经绑定了的设备，弹出自己期望显示的业务");
          alert("想要做点什么？");
        } else if (markId == "70d02fa1-695c-43a7-af62-f2167703a44c") {
          alert("你点了一棵树的标签，想要做点什么？");
        }
      });
    },
    onSetTransparent() {
      qmodel.set_light(0xffffff, 1); //调亮一点
      qmodel.set_all_comps_transparency(0.4);
    },
    onSetBloom() {
      qmodel.set_bloom_open();
      qmodel.set_bloom(
        ["0^dba8ee4c-c31c-4754-9bd7-30f3b2d7e496-0004143f"],
        0xff0000
      );
      qmodel.set_bloom(
        ["0^dba8ee4c-c31c-4754-9bd7-30f3b2d7e496-0004143f"],
        0x00ff22
      );
      //发光的效果，跟光源强度、发光颜色都有关。需要自己多试找到更好的组合。
      qmodel.set_bloom_param({
        bloomStrength: 2,
        bloomThreshold: 0.1,
        bloomRadius: 1,
      });
    },
    onSetMark() {
      qmodel.set_mark(
        '[{"rid":"0^dba8ee4c-c31c-4754-9bd7-30f3b2d7e496-0004143f","position":[18.0522259116305,2.9229183662912277,26.86281980702161],"pngNum":12,"markId":"e9435c0f-743a-4308-b42f-c037b84356fd","type":1}]'
      );
      qmodel.set_mark(
        '{"rid":"0^c5ca341a-0d39-49c1-bf36-52df6386dabd-0004ef14","position":[-13.036964224455623,-34.84194354715854,10.503322070548649],"pngNum":6,"markId":"70d02fa1-695c-43a7-af62-f2167703a44c","type":1}',
        "这是一棵树"
      );
    },
    // 关闭编辑、增加弹出框
    closeDialog() {},
    //控制打开关闭
    toggleShow(data) {
      this.x = 100;
      this.y = 50;

      this.show = !this.show;
    },
    mousedown(event) {
      //鼠标按下事件
      this.leftOffset = event.offsetX;
      this.topOffset = event.offsetY;
      this.isMove = true;
    },
    //鼠标移动
    mousemove(event) {
      if (!this.isMove) {
        return;
      }
      this.x = event.clientX - this.leftOffset;
      this.y = event.clientY - this.topOffset;
    },
    //鼠标抬起
    mouseup() {
      this.isMove = false;
    },
  },
};
</script>
<style scoped>
.moveBox {
  width: 500px;
  height: 300px;
  position: fixed;
  z-index: 99998;
  background: rgb(255, 255, 255);
  box-shadow: 0 0 5px 3px #95a5a6;
}
.moveBox .moveHead {
  height: 35px;
  background-color: rgb(51, 65, 87);
  cursor: move;
  color: #fff;
  padding: 9px 0 0 11px;
}
.moveBox .close {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 30px;
  font-size: 24px;
  cursor: pointer;
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
}

.v-enter,
.v-leave-to {
  opacity: 0;
  transform: scale(0.5);
}
.content {
  padding: 10px;
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
</style>

 
 